<template>
	<view class="order_second">
		<view class="address" @click="addressBtn">
			<image class="image" src="@/static/images/address_icon.png" mode=""></image>
			<view class="info" v-if="address==''">
				<text class="info_no">请选择地址</text>
			</view>
			<view class="info" v-else>
				<view class="info_name">
					<text class="name">{{address.username}} {{address.mobile}}</text>
					<!-- <text class="tip">默认</text> -->
				</view>
				<view class="info_text">
					{{address.area}}{{address.address}}
				</view>
			</view>
			<view class="icon">
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view>
		</view>
		<!--  -->
		<view class="main">
			<view class="goods">
				<view class="image">
					<image :src="info.img" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="name txt-cut">{{info.name}}</view>
					<view class="money">
						<view class="left">
							<!-- <image src="@/static/images/details_icon1.jpg" mode=""></image> -->
							<text>￥{{info.price}}</text>
						</view>
						<view class="right">x{{info.num}}</view>
					</view>
				</view>
			</view>
			<view class="input">
				<view class="left">备注</view>
				<view class="right">
					<u-input v-model="remarks" type="text" :clearable='false' placeholder='请填写备注信息' />
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view :style="[paddingStyle]"></view>
		<view class="footer_btn" :style="[botStyle]">
			<view class="left">
				实付款： <text class="num">￥{{info.allPrice}}</text>
			</view>
			<view class="btn" @click="submitBtn">提交订单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:'',
				bottomHeight:0,
				// 
				address:'',
				// 
				info:{
					id:'',
					img:'',
					name:'',
					price:'',
					num:'',
					allPrice:'',
				},
				// 
				remarks:'',
			};
		},
		computed:{
			paddingStyle(){
				var height = this.bottomHeight?(this.bottomHeight*2+108+'rpx'):'128rpx'
				return {
					paddingBottom:height
				}
			},
			botStyle(){
				return {
					paddingBottom:this.bottomHeight?this.bottomHeight+'px':'20rpx'
				}
			},
		},
		onLoad(options) {
			this.type=options.type
			this.info=JSON.parse(options.info)
			uni.getSystemInfo({
				success: (res) => {
					this.bottomHeight = res.safeAreaInsets.bottom
				}
			});
			this.addressInfo()
		},
		methods:{
			// 获取默认地址
			addressInfo(){
				var that = this
				that.$tips.showLoading('加载中')
				that.$httpApi.defaultaddress().then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						this.address=res.data || ''
					}
				})
			},
			// 选择地址
			addressBtn(){
				uni.navigateTo({
					url:'/pages/person/person_address?type=1'
				})
			},
			// 提交订单
			submitBtn(){
				var that = this
				if(that.address){
					that.$tips.showLoading('提交中')
					var params = {
						goods_id:that.info.id,
						num:that.info.num,
						address_id:that.address.id,
						remarks:that.remarks
					}
					that.$httpApi.orderAdd(params).then((res)=>{
						that.$tips.hideLoading()
						if(res.code==1){
							if(that.type==1){
								// 跳转到仓储订单详情
								uni.navigateTo({
									url:'/pages/order/order_details?id='+res.data.order_id
								})
							}else if(that.type==2){
								uni.navigateTo({
									url:'/pages/mall/mall_pay?id='+res.data.order_id
								})
							}else if(that.type==3){
								uni.navigateTo({
									url:'/pages/order/order'
								})
							}
						}
					})
					
				}else{
					that.$tips.showToast('请选择地址')
					return
				}
			},
		}
	}
</script>

<style lang="less">
	.order_second{
		width: 100%;
		padding-top: 24rpx;
		.address{
			width: 100%;
			padding: 24rpx 20rpx 24rpx 32rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.image{
				display: block;
				width: 68rpx;
				height: 68rpx;
			}
			.img{
				width: 68rpx;
				height: 68rpx;
				line-height: 68rpx;
				font-size: 28rpx;
				text-align: center;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #26C281;
				background: rgba(38,194,129,0.2);
				border-radius: 50%;
			}
			.info{
				width: calc(100% - 160rpx);
				.info_no{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #BEBEBE;
				}
				.info_name{
					width: 100%;
					display: flex;
					align-items: center;
					.name{
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
						padding-right: 20rpx;
					}
					.tip{
						padding: 0 10rpx;
						display: block;
						line-height: 40rpx;
						background: rgba(255, 98, 48, 0.06);
						border-radius: 4px;
						font-size: 22rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FF6230;
					}
				}
				.info_text{
					padding-top: 15rpx;
					font-size: 28rpx;
					line-height: 45rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
			.icon{
				width: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		// 
		.main{
			width: 100%;
			margin-top: 24rpx;
			padding: 32rpx 32rpx 20rpx 32rpx;
			background: #fff;
			.goods{
				width: 100%;
				padding-bottom: 32rpx;
				border-bottom: 1rpx solid #F3F3F3;
				display: flex;
				.image{
					width: 220rpx;
					height: 220rpx;
					image{
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
				.info{
					width: calc(100% - 220rpx);
					padding-left: 20rpx;
					.name{
						width: 100%;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
						line-height: 48rpx;
					}
					.money{
						width: 100%;
						padding-top: 28rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							display: flex;
							align-items: center;
							image{
								display: block;
								width: 40rpx;
								height: 40rpx;
							}
							text{
								padding-left: 6rpx;
								font-size: 40rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #FF6230;
							}
						}
						.right{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}
			.input{
				width: 100%;
				padding-top: 10rpx;
				display: flex;
				.left{
					width: 100rpx;
					line-height: 70rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
				.right{
					width: calc(100% - 100rpx);
					display: flex;
					align-items: center;
					u-input{
						width: 100%;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
				}
			}
		}
		// 
		.footer_btn{
			position: fixed;
			bottom: 0;
			z-index: 100;
			width: 100%;
			background: #fff;
			padding-top: 20rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			display: flex;
			justify-content: space-between;
			.left{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				.tip{
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF6230;
				}
				image{
					display: block;
					width: 40rpx;
					height: 40rpx;
				}
				.num{
					padding-left: 5rpx;
					font-size: 40rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF6230;
				}
			}
			.btn{
				width: 260rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				background: #26C281;
				border-radius: 44rpx;
			}
		}
	}
</style>
